<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心理咨询师 - 迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="therapist.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item" @click="goToPage('index')">网站首页</a>
                <a href="consultation.html" class="nav-item" @click="goToPage('consultation')">心理咨询</a>
                <a href="therapist.html" class="nav-item active" @click="goToPage('therapist')">心理咨询师</a>
                <a href="about.html" class="nav-item" @click="goToPage('about')">关于我们</a>
                <a href="user-center.html" class="nav-item" @click="goToPage('user-center')">个人中心</a>
                <a href="login.html" class="nav-item login-btn" @click="goToPage('login')">登录</a>
            </nav>
        </header>

        <main class="therapist-main">
            <div class="page-header">
                <h1>心理咨询师团队</h1>
                <p>专业、资深的心理咨询师团队，为您提供优质的心理健康服务</p>
            </div>

            <section class="therapist-list">
                <div class="container">
                    <div class="filter-bar">
                        <div class="search-box">
                            <input type="text" v-model="searchQuery" placeholder="搜索咨询师姓名或专长">
                        </div>
                        <div class="filter-options">
                            <div class="filter-group">
                                <label>擅长领域</label>
                                <select v-model="selectedField">
                                    <option value="">所有领域</option>
                                    <option v-for="field in fields" :key="field" :value="field">{{ field }}</option>
                                </select>
                            </div>
                            <div class="filter-group">
                                <label>从业年限</label>
                                <select v-model="selectedExperience">
                                    <option value="">不限</option>
                                    <option value="0-3">3年以下</option>
                                    <option value="3-5">3-5年</option>
                                    <option value="5-10">5-10年</option>
                                    <option value="10+">10年以上</option>
                                </select>
                            </div>
                            <div class="filter-group">
                                <label>评分</label>
                                <select v-model="selectedRating">
                                    <option value="">不限</option>
                                    <option value="4.5">4.5分以上</option>
                                    <option value="4.0">4.0分以上</option>
                                    <option value="3.5">3.5分以上</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="therapist-list">
                        <!-- 加载状态 -->
                        <div v-if="loading" class="loading-state">
                            <div class="spinner"></div>
                            <p>正在加载咨询师信息...</p>
                        </div>

                        <!-- 错误提示 -->
                        <div v-else-if="error" class="error-state">
                            <p>{{ error }}</p>
                            <button @click="fetchTherapists">重试</button>
                        </div>

                        <!-- 咨询师列表 -->
                        <div v-else class="therapist-grid">
                            <div v-for="therapist in filteredTherapists" :key="therapist.id" class="therapist-card">
                                <div class="therapist-avatar">
                                    <img :src="therapist.avatar" :alt="therapist.name">
                                </div>
                                <div class="therapist-info">
                                    <h3>{{ therapist.name }}</h3>
                                    <p class="title">{{ therapist.title }}</p>
                                    <p class="fields">擅长领域：{{ therapist.fields.join('、') }}</p>
                                    <p class="description">{{ therapist.description }}</p>
                                </div>
                                <div class="therapist-actions">
                                    <button class="detail-btn" @click="showDetail(therapist)">查看详情</button>
                                    <button class="appointment-btn" @click="makeAppointment(therapist)">预约咨询</button>
                                </div>
                            </div>
                        </div>

                        <!-- 无数据提示 -->
                        <div v-if="!loading && !error && filteredTherapists.length === 0" class="no-data">
                            <p>未找到符合条件的咨询师</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 预约表单弹窗 -->
            <div v-if="showAppointmentForm" class="appointment-modal">
                <div class="modal-content">
                    <h2>预约咨询</h2>
                    <div class="appointment-form">
                        <div class="form-group">
                            <label>选择日期</label>
                            <select v-model="selectedDate" class="form-control" @change="handleDateChange">
                                <option value="">请选择日期</option>
                                <option v-for="date in availableDates" :key="date.value" :value="date.value">
                                    {{ date.label }}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>选择时间</label>
                            <select v-model="selectedTime" class="form-control" :disabled="!availableTimeSlots.length">
                                <option value="">请选择时间</option>
                                <option v-for="time in availableTimeSlots" :key="time" :value="time">
                                    {{ time }}
                                </option>
                            </select>
                            <p class="hint" v-if="selectedDate && !availableTimeSlots.length">
                                该日期暂无可预约时间段
                            </p>
                        </div>
                        <div class="form-actions">
                            <button class="cancel-btn" @click="cancelAppointment">取消</button>
                            <button class="submit-btn" @click="submitAppointment"
                                :disabled="!selectedDate || !selectedTime">
                                确认预约
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 咨询师详情弹窗 -->
            <div v-if="showDetailModal" class="detail-modal">
                <div class="modal-content detail-content">
                    <div class="detail-header">
                        <h2>咨询师详情</h2>
                        <button class="close-btn" @click="closeDetail">&times;</button>
                    </div>
                    <div class="detail-body" v-if="selectedTherapist">
                        <div class="therapist-basic">
                            <div class="avatar-section">
                                <img :src="selectedTherapist.avatar" :alt="selectedTherapist.name">
                                <div class="rating">
                                    <span class="star">★</span>
                                    <span>{{ selectedTherapist.rating.toFixed(1) }}</span>
                                </div>
                            </div>
                            <div class="info-section">
                                <h3>{{ selectedTherapist.name }}</h3>
                                <p class="title">{{ selectedTherapist.title }}</p>
                                <p class="stats">已服务 {{ selectedTherapist.consultations }} 人次</p>
                            </div>
                        </div>

                        <div class="detail-section">
                            <h4>专业资质</h4>
                            <p>{{ selectedTherapist.qualification }}</p>
                        </div>

                        <div class="detail-section">
                            <h4>从业经验</h4>
                            <p>{{ selectedTherapist.experience }} 年</p>
                        </div>

                        <div class="detail-section">
                            <h4>擅长领域</h4>
                            <div class="fields-tags">
                                <span v-for="field in selectedTherapist.fields" :key="field" class="field-tag">
                                    {{ field }}
                                </span>
                            </div>
                        </div>

                        <div class="detail-section">
                            <h4>个人简介</h4>
                            <p>{{ selectedTherapist.bio }}</p>
                        </div>
                    </div>
                    <div class="detail-footer">
                        <button class="cancel-btn" @click="closeDetail">关闭</button>
                        <button class="appointment-btn" @click="makeAppointmentFromDetail">立即预约</button>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="js/therapist.js"></script>
</body>

</html>